下方的程式碼可以發現product頁面下有多個分頁，我們可以用巢狀的方式幫product相關的頁面給包起來，讓程式稍微簡化一些。

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/contact" element={<Contact />} />
  <Route path="/product" element={<Product />} />
  <Route path="/product/:id" element={<ProductDetail />} />
  <Route path="/product/latest" element={<ProductLatest />} />
</Routes>

同樣url都有/product，可以這樣寫

1. 把跟product相關的搬移到 <Route path="/product" >之下
2. 將子層path中多餘的/product刪除，/product/:id只要留下:id
3. 最後是建立一個/product的index頁面，在這邊只需要給一個參數index他就會帶到element頁面的內容

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/product">
    <Route index element={<Product />} />
    <Route path=":id" element={<ProductDetail />} />
    <Route path="latest" element={<ProductLatest />} />
  </Route>
</Routes>

簡單的巢狀就這樣完成拉~範例連結